<template>
  <el-col :span="24">
    <el-col :span="24" style="height: 60px">

      <el-card class="mt-3">
        <el-col :span="24" class="d-flex justify-content-start" style="height: 40px">
          <el-col :span="4" class="mt-2">
            <span>已学单词数：</span>
            <span>{{ rootData.count }}</span>
          </el-col>
          <el-col :span="4" class="mt-2">
            <span>累计学习：</span>
            <span>{{ rootData.day }}天</span>
          </el-col>
          <el-col :span="4">
            <el-button plain @click="plan_drawer = true">制定学习计划</el-button>
            <el-drawer
              :visible.sync="plan_drawer"
              :direction="plan_direction"
              :before-close="planStudyHandleClose">
              <el-col :span="18" style="height: 600px;" class="ms-5">
                <el-form label-position="top" :model="createPlan" label-width="100%" style="text-align: left"
                         :rules="createPlan.rules">

                  <el-form-item label="计划名称(给自己的计划起个名字)" class="mt-2" prop="name">
                    <el-input v-model="createPlan.name"></el-input>
                  </el-form-item>

                  <el-form-item label="计划类型" prop="type">
                    <el-radio-group v-model="createPlan.typeRadio">
                      <el-radio-button label="2">四/六级</el-radio-button>
                      <el-radio-button label="3">随机</el-radio-button>
                      <el-radio-button label="4">自定义</el-radio-button>
                      <el-radio-button label="5">专四/八</el-radio-button>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="每天完成单词数" prop="count">
                    <el-input-number v-model="createPlan.count"></el-input-number>
                  </el-form-item>
                  <el-button class="mt-3" style="width: 190px" @click="addPlan">确认添加</el-button>
                </el-form>
              </el-col>

            </el-drawer>
          </el-col>
        </el-col>

        <el-col :span="24" class="d-flex justify-content-between mt-5 mb-3">
          <el-col :span="5">
            <el-card>
              <p class="text-primary" style="font-size: 24px">四级/六级</p>
              <el-button plain class="w-75" @click="fourSixLevelDialogVisible  = true">开始练习</el-button>
              <el-dialog
                title="提示"
                :visible.sync="fourSixLevelDialogVisible"
                width="30%"
                center>
                <span>四六级</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="fourSixLevelDialogVisible = false">取 消</el-button>
                   <el-button type="primary" @click="startPractice(2)">确 定</el-button>
                </span>
              </el-dialog>

            </el-card>
          </el-col>
          <el-col :span="5">
            <el-card>
              <p class="text-primary" style="font-size: 24px">自定义</p>
              <el-button plain class="w-75" @click="customDialogVisible = true">开始练习</el-button>
              <el-dialog
                title="提示"
                :visible.sync="customDialogVisible"
                width="30%"
                center>
                <span>自定义练习</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="customDialogVisible = false">取 消</el-button>
                   <el-button type="primary" @click="startPractice(4)">确 定</el-button>
                </span>
              </el-dialog>

            </el-card>
          </el-col>
          <el-col :span="5">
            <el-card>
              <p class="text-primary" style="font-size: 24px">随机</p>
              <el-button plain class="w-75" @click="randomDialogVisible = true">开始练习</el-button>
              <el-dialog
                title="提示"
                :visible.sync="randomDialogVisible"
                width="30%"
                center>
                <span>随机</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="randomDialogVisible = false">取 消</el-button>
                   <el-button type="primary" @click="startPractice(3)">确 定</el-button>
                </span>
              </el-dialog>
            </el-card>
          </el-col>
          <el-col :span="5">
            <el-card>
              <p class="text-primary" style="font-size: 24px">专四/专八</p>
              <el-button plain class="w-75" @click="majorDialogVisible = true">开始练习</el-button>
              <el-dialog
                title="提示"
                :visible.sync="majorDialogVisible"
                width="30%"
                center>
                <span>专48</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="majorDialogVisible = false">取 消</el-button>
                   <el-button type="primary" @click="startPractice(5)">确 定</el-button>
                </span>
              </el-dialog>
            </el-card>
          </el-col>
        </el-col>


        <el-col :span="24" style="text-align: left">
          <el-divider></el-divider>

          <span style="font-size: 18px" class="ps-2">我的计划</span>
          <el-table height=400 :data="planList" empty-text="暂无计划">
            <el-table-column label="计划名称" prop="name"></el-table-column>
            <el-table-column label="计划类型" prop="typeName"></el-table-column>
            <el-table-column label="创建时间" prop="createTime"></el-table-column>
            <el-table-column label="单词数(天)" prop="count"></el-table-column>
            <el-table-column label="累计天数(完成)" prop="day"></el-table-column>
            <el-table-column label="是否完成(今天)" prop="complete">
              <template slot-scope="scope">
                <span class="text-success" v-if="scope.row.complete==1">已完成</span>
                <span class="text-danger" v-if="scope.row.complete==2">未完成</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                <el-button size="mini" @click="startPlan(scope.$index,scope.row)" type="success">开始计划</el-button>
                <el-button size="mini" @click="editRow(scope.$index,scope.row)" type="primary">编辑</el-button>
                <el-popconfirm
                  title="确认删除此计划嘛？"
                  @confirm="deleteRow(scope.$index,scope.row)"
                  class="ms-2"
                >
                  <el-button slot="reference" size="mini" type="danger">删除</el-button>
                </el-popconfirm>


              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-card>


    </el-col>

    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <span>我来啦!</span>
    </el-drawer>

  </el-col>
</template>

<script>
import notification from '@/notif/notification'

export default {
  name: 'index',
  data () {
    return {
      drawer: false,
      direction: 'rtl',
      plan_drawer: false,
      plan_direction: 'rtl',
      fourSixLevelDialogVisible: false,
      customDialogVisible: false,
      randomDialogVisible: false,
      majorDialogVisible: false,
      rootData: {
        count: 0,
        day: 0
      },
      planList: [
        {
          id: 0,
          name: '',
          createTime: '',
          count: 0,
          day: 0,
          complete: 0,
          typeName: '四/六级'
        }
      ],
      createPlan: {
        name: '',
        typeRadio: 1,
        count: 0,
        rules: {
          name: [
            {
              required: true,
              message: '请输入计划名字',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 15,
              message: '长度在 1 到 15 个字符',
              trigger: 'blur'
            }
          ],
          type: [
            {
              required: true,
              message: '请选择类型',
              trigger: 'blur'
            }
          ],
          count: [
            {
              type: 'integer',
              required: true,
              message: '请输入时间',
              trigger: 'change'
            }
          ]
        }
      }
    }
  },
  mounted () {
    let userid = JSON.parse(localStorage.getItem('user')).userId
    this.$http.getPlan({
      userId: userid
    }).then(res => {
      this.planList = res.data.planList
    })
    this.$http.getRootData({
      userId: userid
    }).then(res => {
      this.rootData = res.data.data
    })

  },
  methods: {
    editRow (index, row) {
      // console.log( row)
      this.drawer = true
    },

    deleteRow (index, row) {
      console.log(row)
    },
    startPlan (index, row) {
      console.log(row)
      if (row.complete == 1) {
        this.$message.success('今天的计划已经完成了！')
        return
      } else {
        this.startPractice(row)
      }
    },
    handleClose (done) {
      done()
    },
    planStudyHandleClose (done) {
      done()
    },
    startPractice (row) {
      //1计划练习 2四六级 3随机 4自定义 5专4专8
      let url = this.$router.resolve({
        query: {
          userId: JSON.parse(localStorage.getItem('user')).userId,
          planId: row.planId,
          type: row.type,
          createTime: row.createTime
        },
        path: '/paper'
      })

      window.open(url.href, '_blank')

      switch (row.type) {
        case 1:
          break
        case 2:
          break
        case 3:
          break
        case 4:
          break
        case 5:
          break
      }
    },
    addPlan () {
      // name: '',
      //   typeRadio: 1,
      //   count: 0,
      this.$http.addPlan({
        name: this.createPlan.name,
        typeRadio: this.createPlan.typeRadio,
        count: this.createPlan.count,
        userId: JSON.parse(localStorage.getItem('user')).userId
      }).then(res => {
        // this.planStudyHandleClose()
        notification.notify('提示', '您添加了一个新计划！', '/img/logo.2152d3d2.png', '/wordPractice/index')
      })

    }
  }
}
</script>

<style scoped>

</style>
